<template>
  <div class="vbox flex1">
    <el-row :gutter="20" style="margin-left:0;margin-right:0">
      <el-col
        :xs="12"
        :md="8"
        :lg="6"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 120px;padding-bottom: 10px;"
      >
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </el-col>
    </el-row>
    <div class="vbox flex1">
      <div class="sub-title">公告消息</div>
      <message-com
        @msg-click="msgClick"
        :pageSizes="[30]"
        code="home"
        :showToolbar="false"
        :optionBtns="[]"
      ></message-com>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      center
      title="公告详情"
      :visible.sync="showMsgRmk"
      width="35%"
    >
      <div style="min-height:400px" v-html="msg.rmk"></div>
    </el-dialog>
    <!-- <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>待处理</span>
            <el-button @click="openOrderList" style="float: right; padding: 3px 0" type="text">查看全部</el-button>
          </div>
          <base-table
            ref="orderTable"
            url="order/getPage"
            code="htk"
            :param="searchParam"
            :cls="columns"
          ></base-table>
        </el-card>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
import InforCard from "@/components/info-card/info-card";
import CountTo from "@/components/count-to";
import MessageCom from "@/views/htk/message/msg.vue";

export default {
  components: {
    InforCard,
    CountTo,
    MessageCom
  },
  activated() {
    this.getOrderStates();
    this.countOrder();
  },
  data() {
    let me = this;
    return {
      showMsgRmk: false,
      searchParam: {},
      orderStates: [],
      msg: {},
      columns: [
        {
          prop: "commodityCode",
          label: "订单号/转运单号",
          custom: true,
          code: "commodityCode"
        },
        {
          prop: "recipientsName",
          label: "寄/收件人",
          custom: true,
          code: "recipientsName"
        },
        { prop: "amount", label: "数量", width: 100 },
        {
          prop: "weight",
          label: "重量/价格",
          custom: true,
          code: "weight_price"
        },
        // { prop: "prdName", label: "产品名称" },
        {
          prop: "destination",
          label: "始发/目的地",
          custom: true,
          code: "destination"
        },
        {
          prop: "recipientsAddress",
          label: "发件/收件地址",
          custom: true,
          code: "recipientsAddress"
        },
        {
          prop: "state",
          label: "订单状态",
          width: 100,
          formatter(row) {
            let orderState = me.orderStates.find(item => {
              return item.value == row.state;
            });
            return !orderState ? "" : orderState.name;
          }
        },
        { prop: "creationTime", label: "创建时间", width: 180 }
      ],
      inforCardData: []
    };
  },
  methods: {
    msgClick(row, column) {
      if (column.property == "rmk") {
        this.msg = row;
        this.showMsgRmk = true;
      }
    },
    openOrderList() {
      this.$router.push({ path: "OrderQuery" });
    },
    getOrderStates() {
      let me = this;
      me.$http.ajax({
        url: "sysDictData/getForSelect/order_state",
        success: res => {
          me.orderStates = res;
        }
      });
    },
    countOrder() {
      let me = this;
      me.$http.ajax({
        url: "order/countOrderTotal/" + me.$store.state.admin.id,
        code: "htk",
        success: res => {
          if (res) {
            me.inforCardData = me.getTitle(res);
          }
        }
      });
    },
    getTitle(res) {
      return [
        {
          title: "已入库",
          icon: "file-excel-o",
          color: "#00AAFF",
          count: res["10"]
        },
        {
          title: "已称重",
          icon: "file-excel-o",
          color: "#2d8cf0",
          count: res["15"]
        },
        {
          title: "报关中",
          icon: "file-excel-o",
          color: "#19be6b",
          count: res["30"]
        },
        {
          title: "清关中",
          icon: "file-excel-o",
          color: "#ff9900",
          count: res["35"]
        }
      ];
    }
  }
};
</script>

<style>
.sub-title {
  padding: 10px;
  background: #f0f0f0;
}
</style>
